<template>
  <v-skeleton-loader
    v-if="loading"
    type="article, list-item@20"
  ></v-skeleton-loader>
  <v-card
    v-else-if="jobs"
    class="mx-auto jobs-container rounded-lg"
    width="96%"
  >
    <v-toolbar flat>
      <div class="toolbar-left">
        <v-card-title class="card-title"
          >{{ jobs.number }} - {{ jobs.customerName }}</v-card-title
        >
        <v-subheader class="toolbar-subtitle pr-1"
          ><i
            >Admin, last updates by {{ jobs.updateDate }} at
            {{ jobs.updateTime }}</i
          ></v-subheader
        >
        <div class="d-flex container-title">
          <v-toolbar-title class="toolbar-title">
            {{ currentProject.projectType }} -
            {{ currentProject.projectNumber }}
          </v-toolbar-title>
          <v-subheader class="itemDetail-header">
            <b>{{ jobs.jobsSum }}</b
            >jobs <b>{{ jobs.tasksSum }}</b
            >tasks
          </v-subheader>
        </div>
      </div>
      <v-spacer></v-spacer>
      <div class="toolbar-right">
        <div class="toolbar-right-btn text-right">
          <v-btn icon small>
            <v-icon small color="grey">mdi-plus-thick</v-icon>
          </v-btn>
          <v-menu content-class="action-menu" offset-y>
            <template v-slot:activator="{ on }">
              <v-btn v-on="on" icon small>
                <v-icon small color="grey">mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list flat class="action-list">
              <v-list-item class="list-item" @click="deleteJob">
                <v-list-item-title>
                  <v-list-item-icon>
                    <v-icon class="delete-icon icon">mdi-delete</v-icon>
                  </v-list-item-icon>
                  <span class="text"> Delete Job </span>
                </v-list-item-title>
              </v-list-item>
              <v-list-item class="list-item" @click="copyJob">
                <v-list-item-title>
                  <v-list-item-icon>
                    <v-icon class="icon">mdi-file-multiple</v-icon>
                  </v-list-item-icon>
                  <span class="text"> Copy Job </span>
                </v-list-item-title>
              </v-list-item>
              <v-list-item class="list-item" @click="copyJob">
                <v-list-item-title>
                  <v-list-item-icon>
                    <v-icon class="icon">mdi-file-export</v-icon>
                  </v-list-item-icon>
                  <span class="text"> Export Job </span>
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
        <div class="toolbar-right-progress">
          <v-progress-linear
            :value="jobs.progress"
            color="#eb9b31"
            background-color="#BABABC"
            height="16"
            class="progress-linear"
          ></v-progress-linear>
          <span>{{ jobs.progress }} %</span>
        </div>
      </div>
    </v-toolbar>
    <v-lazy
      :options="{
        threshold: 0.5,
      }"
      min-height="500"
      transition="scroll-x-transition"
    >
      <JobsItem :jobList="jobList" :selected.sync="selectedJob" />
    </v-lazy>
    <Dialog
      v-model="showDialog"
      :show-save="false"
      width="480"
      title="Delete Job"
    >
      <v-card v-if="selectedJob">
        <DeleteJob :job="selectedJob"></DeleteJob>
      </v-card>
    </Dialog>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import JobsItem from "@/components/Project/Jobs/JobsItem.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import DeleteJob from "./DeleteJob.vue";
import { IJobs, IJobItem, IProjectItem } from "@/components/Project/index";

@Component({
  components: {
    JobsItem,
    Dialog,
    DeleteJob,
  },
})
export default class Jobs extends Vue {
  loading = false;
  show = false;
  showDialog = false;

  get selectedJob() {
    return this.$store.state.ProjectsStore.selectedJob;
  }

  set selectedJob(job: IJobItem | null) {
    if (job) {
      this.$store.commit("ProjectsStore/setSelectedJob", job);
    } else {
      this.$store.commit("ProjectsStore/setSelectedJob", null);
    }
  }

  get jobList(): Array<IJobItem> {
    if (this.jobs) {
      return this.jobs.jobList;
    } else {
      return [];
    }
  }

  get jobs(): IJobs {
    return this.$store.state.ProjectsStore.jobs;
  }
  @Watch("jobs", { immediate: true })
  onJobsChange(jobs: IJobs) {
    if (!jobs) {
      this.$store.commit("ProjectsStore/setSelectedJob", null);
    }
  }

  get currentProject(): IProjectItem {
    return this.$store.state.ProjectsStore.selectedProject;
  }

  @Watch("currentProject")
  onProjectChange(val: number | null) {
    console.log(val, "change");
    if (val) {
      this.loading = true;
      this.setJobs();
    } else {
      clearTimeout(this.timeout as number);
      this.$store.commit("ProjectsStore/setJobs", null);
      this.loading = false;
    }
  }
  timeout: number | null = null;
  setJobs() {
    this.timeout = setTimeout(() => {
      const jobs: IJobs = {
        id: "1",
        number: "000092",
        customerName: "Auto Company",
        updateDate: "2021-11-12",
        updateTime: "15:23:46",
        progress: 70,
        jobsSum: 5,
        tasksSum: 11,
        jobList: [
          {
            id: "1",
            jobCate: "DL",
            customerName: "Auto Company",
            progress: 70,
            number: "2021120901",
            status: "Ongoing",
            priority: "High",
            startDate: "2021-12-09 15:30",
            endDate: "2022-12-09 16:00",
            jobName: "User Testing",
            tel: "9028 2389",
            contactPerson: "Tim Wong",
            jobDescription:
              "Check control panels and electrical wiring to identify issues",
            projectLocation:
              "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
            tasksSum: 2,
            assignTo: "Mark Wong",
            remarks:
              "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
            reportProblemList: [
              {
                id: "1",
                serialNumber: "AC0001",
                itemDescription: "Air conditioner",
                symptoms: "TTI",
              },
              {
                id: "2",
                serialNumber: "AC0002",
                itemDescription: "Cooling System",
                symptoms: "DN",
              },
            ],
            attachmentList: [
              {
                id: "1",
                date: "2021-08-15",
                number: "DL-20211209001",
                fileList: [
                  {
                    id: "1",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "2",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "3",
                    ext: "jpg",
                    src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                ],
              },
              {
                id: "2",
                date: "2021-08-08",
                number: "DL-20211209002",
                fileList: [
                  {
                    id: "1",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "2",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "3",
                    ext: "jpg",
                    src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "4",
                    ext: "jpg",
                    src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "6",
                    ext: "jpg",
                    src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                ],
              },
            ],
          },
          {
            id: "2",
            jobCate: "ST",
            number: "2021120902",
            customerName: "Auto Company",
            progress: 70,
            status: "Finished",
            priority: "Middle",
            startDate: "2021-12-09 15:30",
            endDate: "2022-12-09 16:00",
            jobName: "System Alert",
            tel: "9028 2389",
            contactPerson: "Tim Wong",
            jobDescription:
              "Check control panels and electrical wiring to identify issues",
            projectLocation:
              "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
            tasksSum: 0,
            assignTo: "Mark Wong",
            remarks:
              "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
            reportProblemList: [
              {
                id: "1",
                serialNumber: "AC0001",
                itemDescription: "Air conditioner",
                symptoms: "TTI",
              },
              {
                id: "2",
                serialNumber: "AC0002",
                itemDescription: "Cooling System",
                symptoms: "DN",
              },
            ],
            attachmentList: [
              {
                id: "1",
                date: "2021-08-15",
                number: "DL-20211209001",
                fileList: [
                  {
                    id: "1",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                    title: "FS-21080002",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "2",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "3",
                    ext: "jpg",
                    src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                ],
              },
              {
                id: "2",
                date: "2021-08-08",
                number: "DL-20211209002",
                fileList: [
                  {
                    id: "1",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "2",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "3",
                    ext: "jpg",
                    src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "4",
                    ext: "jpg",
                    src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "6",
                    ext: "jpg",
                    src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                ],
              },
            ],
          },
          {
            id: "3",
            jobCate: "DL",
            number: "2021120904",
            customerName: "Auto Company",
            progress: 70,
            status: "Finished",
            priority: "Middle",
            startDate: "2021-12-09 15:30",
            endDate: "2022-12-09 16:00",
            jobName: "Installing",
            tel: "9028 2389",
            contactPerson: "Tim Wong",
            jobDescription:
              "Check control panels and electrical wiring to identify issues",
            projectLocation:
              "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong, Kowloon",
            tasksSum: 3,
            assignTo: "Mark Wong",
            remarks:
              "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control.Peerless Automation,Unlimited Users, ISO Accredited",
            reportProblemList: [
              {
                id: "1",
                serialNumber: "AC0001",
                itemDescription: "Air conditioner",
                symptoms: "TTI",
              },
              {
                id: "2",
                serialNumber: "AC0002",
                itemDescription: "Cooling System",
                symptoms: "DN",
              },
            ],
            attachmentList: [
              {
                id: "1",
                date: "2021-08-15",
                number: "DL-20211209001",
                fileList: [
                  {
                    id: "1",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "2",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "3",
                    ext: "jpg",
                    src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                ],
              },
              {
                id: "2",
                date: "2021-08-08",
                number: "DL-20211209002",
                fileList: [
                  {
                    id: "1",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2022/10/03/21/47/fog-7496901_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "2",
                    ext: "jpg",
                    src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "3",
                    ext: "jpg",
                    src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "4",
                    ext: "jpg",
                    src: "https://ts1.cn.mm.bing.net/th/id/R-C.40e8a86c22b0e5211b838d35eb3ed2e9?rik=10BkvUtRe%2bUfFA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284852.jpg&ehk=u8msuCl9ufjNb919xfDzyz6n%2bfNrpMx6gzFcWxjPXDI%3d&risl=&pid=ImgRaw&r=0",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                  {
                    id: "6",
                    ext: "jpg",
                    src: "https://ts1.cn.mm.bing.net/th/id/R-C.18c926a5b5b33e6c7ec7938fe79714a6?rik=XROULmNY%2fkPEcQ&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201603%2f23%2f201603230207284857.jpg&ehk=Daa7YSXlRf09mbTzfKuvuRlPY%2fsqG0qDVAZqb%2bvkVB0%3d&risl=&pid=ImgRaw&r=0",
                    title: "FS-21080001",
                    subtitle: "Inspection Sheet",
                  },
                ],
              },
            ],
          },
        ],
      };
      this.$store.commit("ProjectsStore/setJobs", jobs);
      this.loading = false;
    }, 1500);
  }

  openDialog() {
    this.showDialog = true;
  }

  hideDialog() {
    this.showDialog = false;
  }

  deleteJob() {
    if (!this.selectedJob) {
      this.$Swal.fire({
        position: "center",
        icon: "warning",
        title: "Please select the job you want to delete",
        showConfirmButton: false,
        timer: 1500,
      });
      return;
    }
    this.openDialog();
  }

  copyJob() {
    console.log("copyJob");
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Project/Jobs/Jobs.scss";
</style>
